<template>
  <div class="p-2">
    <el-card>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="模型名称" prop="modelName">
          <el-input v-model="form.modelName" placeholder="请输入模型名称" />
        </el-form-item>
        <el-form-item label="模型标识" prop="modelCode">
          <el-input 
            v-model="form.modelCode" 
            placeholder="请输入模型标识"
            :disabled="form.id !== undefined"
          >
            <template #append>.cms</template>
          </el-input>
        </el-form-item>
        <el-form-item label="模型类型" prop="modelType">
          <el-select 
            v-model="form.modelType" 
            placeholder="请选择模型类型"
            :disabled="form.id !== undefined"
          >
            <el-option
              v-for="dict in modelTypeOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据表名" prop="tableName">
          <el-input 
            v-model="form.tableName" 
            placeholder="请输入数据表名"
            :disabled="form.id !== undefined"
          >
            <template #prepend>cms_</template>
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="form.state">
            <el-radio
              v-for="dict in sys_normal_disable"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input 
            v-model="form.remark" 
            type="textarea" 
            placeholder="请输入备注" 
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getModel, addModel, updateModel } from '@/api/cms/model';
import { ModelForm, ModelType } from '@/api/cms/model/types';

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict('sys_normal_disable');
const route = useRoute();

// 字典数据
const modelTypeOptions = ref([
  { label: '文章', value: ModelType.ARTICLE },
  { label: '单页', value: ModelType.PAGE },
  { label: '分类', value: ModelType.CATEGORY }
]);

// 表单参数
const form = ref<ModelForm>({
  modelName: undefined,
  modelCode: undefined,
  modelType: undefined,
  tableName: undefined,
  state: '0',
  isSystem: false
});

// 表单校验
const rules = ref({
  modelName: [
    { required: true, message: "模型名称不能为空", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
  ],
  modelCode: [
    { required: true, message: "模型标识不能为空", trigger: "blur" },
    { pattern: /^[a-z][a-z0-9_]*$/, message: "只能包含小写字母、数字和下划线，且必须以字母开头", trigger: "blur" }
  ],
  modelType: [
    { required: true, message: "请选择模型类型", trigger: "change" }
  ],
  tableName: [
    { required: true, message: "数据表名不能为空", trigger: "blur" },
    { pattern: /^[a-z][a-z0-9_]*$/, message: "只能包含小写字母、数字和下划线，且必须以字母开头", trigger: "blur" }
  ]
});

/** 提交按钮 */
const submitForm = () => {
  proxy.$refs['formRef'].validate((valid: boolean) => {
    if (valid) {
      if (form.value.id !== undefined) {
        updateModel(form.value).then(response => {
          proxy.$modal.msgSuccess('修改成功');
          cancel();
        });
      } else {
        addModel(form.value).then(response => {
          proxy.$modal.msgSuccess('新增成功');
          cancel();
        });
      }
    }
  });
};

/** 取消按钮 */
const cancel = () => {
  proxy.$router.push('/cms/model');
};

// 获取模型详细信息
const getInfo = async (id: string | number) => {
  const response = await getModel(id);
  form.value = response.data;
};

onMounted(() => {
  const id = route.params?.id;
  if (id) {
    getInfo(id);
  }
});

// 自动生成表名
watch(() => form.modelCode, (val) => {
  if (val && !form.tableName) {
    form.tableName = val;
  }
});
</script> 